<template>
    <ul id="footer">
        <router-link to="/" tag="li" active-class="active" exact>
            <div>
                <i class="iconfont icon_index" >&#xe61f;</i>
                <span>首页</span>
            </div>
        </router-link>    
        <router-link to="/category"  tag="li" active-class="active">
            <div>
                <i class="iconfont icon_category">&#xe696;</i>
                <span>分类</span>
            </div>
        </router-link>    
        <router-link to="/marketcar" tag="li" active-class="active">
            <div>
                <i class="iconfont icon_marketcar">&#xe698;</i>
                <span>购物车</span>
            </div>
        </router-link>    
        <router-link to="/mine" tag="li" active-class="active">
            <div>
                <i class="iconfont icon_mine">&#xe6a3;</i>
                <span>我</span>
            </div>
        </router-link>    
    </ul>
</template>
<script>
    export default{

    }
</script>
<style scoped>
    #footer{
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 40;
        height: 2.1rem;
        display: flex;
        font-size: 1rem;
        background: #fff;
    }
    @font-face {
        font-family: 'iconfont';  /* project id 344125 */
        src: url('//at.alicdn.com/t/font_a131e9qdqk9be29.eot');
        src: url('//at.alicdn.com/t/font_a131e9qdqk9be29.eot?#iefix') format('embedded-opentype'),
        url('//at.alicdn.com/t/font_a131e9qdqk9be29.woff') format('woff'),
        url('//at.alicdn.com/t/font_a131e9qdqk9be29.ttf') format('truetype'),
        url('//at.alicdn.com/t/font_a131e9qdqk9be29.svg#iconfont') format('svg');
    }
     #footer li{
        width: 25%;
        color:rgb(102, 102, 102);
    } 
    #footer .iconfont{
        font-size: .9rem;
    }
    .icon_index{
        font-family: iconfont;
    }
    .icon_category{
        font-family: iconfont;        
    }
    .icon_marketcar{
        font-family: iconfont;
    }
    .icon_mine{
        font-family: iconfont;
    }
    #footer div{
        height: 100%;
        font-size: 0.6rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }
    #footer div span{
        font-size: 0.58rem;
    }
    #footer .active{
        color: rgb(255, 51, 102);
        font-size: 3rem;
    }
</style>
